<!DOCTYPE html>
<html manifest="project.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ETH Photo Tour</title>
<STYLE TYPE="text/css" MEDIA="all">
<!--
@import url(stylesheets/reset.css);

@import url(stylesheets/basic.css);
-->
</STYLE>
<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/jqmultitouch/jquery.multitouch.js"></script>
<script src="scripts/navigation.js"></script>
<script>
	initNavigation(getCurrentPage(), 'body', 40);
</script>
<script src="scripts/gallery.js"></script>
<script>
	$(document).ready(function() {
		runGallery();
	});

	registerMultitouch();
</script>
</head>
<body>
	<section id="top">
		<nav id="leftColumn">
			<a id="menu" href="#">Menu</a>
			<a href="#">About Us</a>
			<a href="#">People</a>
			<a href="#">Research</a>
			<a href="#">Studies</a>
			<a href="#">Training</a>
			<a href="#">Campus Info</a>
		</nav>
		<header id="topMain">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="article.html">ETH Life</a></li>
				<li><a href="gallery.html" id="activated">Photo Tour</a></li>
			</ul>
		</header>
		<section id="mainColumn">
			<h1>
				<a href="#">Photo Tour</a>
			</h1>
			<section class="marginLeftAndRight">
				<div id="slideshow">
					<img id="slideshowimg1" src="images/eth-1-large.jpg" alt="" />
					<img id="slideshowimg2" src="images/eth-2-large.jpg" alt="" />
					<img id="slideshowimg3" src="images/eth-3-large.jpg" alt="" />
					<img id="slideshowimg4" src="images/eth-4‎-large.jpg" alt="" />
					<img id="slideshowimg6" src="images/eth-6-large.jpg" alt="" />
					<img id="slideshowimg7" src="images/eth-7-large.jpg" alt="" />
				</div>
				<ul id="slideshowNavigationButtons">
					<li><a id="previous" href="#" onClick="return false;">
							<img id="slideshowNavigationImages" src="images/previous.png" alt="" />
						</a></li>
					<li><a id="play" href="#" onClick="return false;">
							<img id="slideshowNavigationImages" src="images/play.png" alt="" />
						</a></li>
					<li><a id="pause" href="#" onClick="return false;">
							<img id="slideshowNavigationImages" src="images/pause.png" alt="" />
						</a></li>
					<li><a id="next" href="#" onClick="return false;">
							<img id="slideshowNavigationImages" src="images/next.png" alt="" />
						</a></li>
				</ul>
				<ul id="photoTourHorizontal">
					<li class="leftImage"><img id="img1" src="images/eth-1.jpg" alt="" /></li>
					<li class="middleImage"><img id="img2" src="images/eth-2.jpg" alt="" /></li>
					<li class="middleImage"><img id="img3" src="images/eth-3.jpg" alt="" /></li>
					<li class="middleImage"><img id="img4" src="images/eth-4.jpg" alt="" /></li>
					<li class="middleImage"><img id="img6" src="images/eth-6.jpg" alt="" /></li>
					<li class="rightImage"><img id="img7" src="images/eth-7.jpg" alt="" /></li>
				</ul>
			</section>
			<section id="photoTourBlock" class="marginLeftAndRight">
				<div class="photoTourSubBlock divRightMargin">
					<h3>ETH Zentrum</h3>
					<div class="pictures">
						<a href="#">
							<img src="images/eth-1.jpg" alt="">
						</a>
						<a href="#">
							<img src="images/eth-2.jpg" alt="">
						</a>
						<a href="#">
							<img src="images/eth-3.jpg" alt="">
						</a>
						<a href="#">
							<img src="images/eth-4.jpg" alt="">
						</a>
					</div>
				</div>
				<div class="photoTourSubBlock">
					<h3>ETH Hoenggerberg</h3>
					<div class="pictures">
						<a href="#">
							<img src="images/eth-5.jpg" alt="">
						</a>
						<a href="#">
							<img src="images/eth-6.jpg" alt="">
						</a>
						<a href="#">
							<img src="images/eth-7.jpg" alt="">
						</a>
						<a href="#">
							<img src="images/eth-8.jpg" alt="">
						</a>
					</div>
				</div>
			</section>
		</section>
		<section id="rightColumn">
			<div id="photoTitle">
				<h3>ETH Life News</h3>
			</div>
			<article class="photoTourArticles">
				<h3>Subordinate animals as guinea pigs.</h3>
				<a href="#">
					<img src="images/article-1.jpg" alt="" />
				</a>
				<p>Subordinate animals must face higher risks than dominant ones Dominant meerkat females
					yield to their subaltern group members when ...</p>
				<a href="#">more ...</a>
				<div>&nbsp;</div>
			</article>
			<article class="photoTourArticles photoTourHorizontalLine">
				<h3>How graphene behaves on a small scale.</h3>
				<a href="#">
					<img src="images/article-2.jpg" alt="" />
				</a>
				<p>ETH Zurich is involved in the “Graphene Flagship” project through Klaus Ensslin, a
					professor of experimental physics. ETH Life ...</p>
				<a href="#">more ...</a>
				<div>&nbsp;</div>
			</article>
			<article class="photoTourArticles photoTourHorizontalLine">
				<h3>Research success by the dozen - part two.</h3>
				<a href="#">
					<img src="images/article-3.jpg" alt="" />
				</a>
				<p>The EU is launching two large-scale research projects for the next ten years in the form
					of “Graphene” and the “Human Brain Project”...</p>
				<a href="#">more ...</a>
				<div>&nbsp;</div>
			</article>
			<div id="stayInformed">
				<h2>Stay Informed:</h2>
				<a class="fbk_link" href="http://facebook.com/">Facebook</a>
				<a class="twt_link" href="http://twitter.com/">Twitter</a>
			</div>
		</section>
		<div>&nbsp;</div>
		<footer id="bottomMain">
			<div>
				<div class="footerLinks">
					<h3>Imprint</h3>
				</div>
				<div class="footerLinks">
					<h3>Disclaimer</h3>
				</div>
				<div class="footerLinks">
					<h3>Contact</h3>
				</div>
				<div class="footerLinks">
					<h3>Help</h3>
				</div>
			</div>
			<div id="copyright" class="footer">
				<p>&copy; Copyright 2013. All rights reserved</p>
			</div>
		</footer>
	</section>
</body>
</html>
